<template>
  <div class="app-relation">
      <Navbar title="与我相关"></Navbar>
      <view class="list">
          <view class="item" v-for="(item,i) in list" :key="i" @click="$gotoUrl('/pages/community/community-item?id='+item.tagId)">
              <view class="img">
                  <image :src="item.portrait" mode="aspectFill"></image>
              </view>
              <view class="cont">
                  <view class="name">
                    {{item.name}}   
                    <!-- <span class="tips">我的关注</span> -->
                  </view>
                  <view class="text"> {{getTypeText(item.type)}} <span class="time">{{$getDateDiff(item.createdTime)}}</span></view>
                  <view class="comment" v-if="item.type==1">@{{item.name}} <span class="comment-text">{{item.context}}</span></view>
                  <!-- <view class="btns">
                      <view class="btn">
                          <img src="/static/live.png" alt="">
                          <span>赞</span>
                      </view>
                      <view class="btn">
                          <img src="/static/message.png" alt="">
                          <span>回复</span>
                      </view>
                  </view> -->
              </view>
              <view class="img2">
                  <image src="/static/community/1.png" mode="aspectFill"></image>
              </view>
          </view>
      </view>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list:[],
      form:{
        pageNum:1,
        pageSize:10,
      }, 
    }
  },
  created(){
    this.getListData()
    this.getReadData()
  },
  onReachBottom() {
    this.form.pageNum++
    this.getListData()
  },
  onUnload(){
    //退出页面 将所有的会话内的消息设置为已读
    let promise = this.tim.setMessageRead({conversationID: this.$store.state.conversationActive.conversationID});
    promise.then(function(imResponse) {
      console.log('全部已读')
      // 已读上报成功
    }).catch(function(imError) {
      // 已读上报失败
      console.warn('setMessageRead error:', imError);
    });
  },
  methods: {
    getTypeText(type){
      if(type==0){
        return '点赞了你'
      }else if(type==1){
        return '在评论中@了你'
      }else if(type==3){
        return '加入了你的活动'
      }else if(type==4){
        return '关注了你'
      }
    },
    getReadData(){
      this.$http.post("/business/business/notice/read/all")
    },
    getListData(){
      uni.showLoading({
        mask: true,
        title: '加载中'
      });
      this.$http.post('/business/business/notice/page',this.form).then(res=>{
        this.list=this.list.concat(res.retObject.list)
        uni.hideLoading();
      })
    }
  },
}
</script>
<style lang="scss" scoped>
  .list{
    .item{
      display: flex;
      padding:40rpx 0 20rpx 0;
      margin: 0 30rpx;
      border-bottom: 2rpx solid #F5F6F7;
      &>.img image{
        margin-right: 20rpx;
        width: 88rpx;
        height: 88rpx;
        border-radius: 50%;
      }
      &>.img2 image{
        margin-left: 20rpx;
        width: 88rpx;
        height: 88rpx;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
      }
      &>.cont{
        flex: 1;
        .name{
          font-size: 28rpx;
          color: #101011;
          line-height: 33rpx;
          .tips{
            background: #F5F6F7;
            border-radius: 34rpx 34rpx 34rpx 34rpx;
            font-size: 20rpx;
            color: #909399;
            padding: 6rpx 10rpx;
          }
          margin-bottom: 18rpx;
        }
        .text{
          color: #606266;
          line-height: 28rpx;
          margin-bottom: 20rpx;
          .time{
            margin-left: 20rpx;
          }
        }
        .comment{
          font-size: 26rpx;
          color: #101011;
          line-height: 30rpx;
          margin-bottom: 20rpx;
          .comment-text{
            margin-left: 20rpx;
          }
        }
        .btns{
          display: flex;
          .btn{
            display: flex;
            line-height: 28rpx;
            align-items: center;
            padding: 10rpx 20rpx;
            background: #F5F6F7;
            border-radius: 32rpx 32rpx 32rpx 32rpx;
            img{
              width: 32rpx;
              height: 32rpx;
              margin-right: 10rpx;
            }
          }
          .btn+.btn{
            margin-left: 20rpx;
          }
        }
      }
    }
  }
</style>